<template>
  <div>
    <el-dialog :before-close="handleClose" :visible.sync="showMenu" :title="title" width="600px">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
            <el-radio-button label="0">目录</el-radio-button>
            <el-radio-button label="1">菜单</el-radio-button>
            <el-radio-button label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
          <el-radio-group v-model="form.hidden" size="mini">
            <el-radio-button label="false">是</el-radio-button>
            <el-radio-button label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
        </el-form-item>
        <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
          <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="菜单排序" prop="menuSort">
          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件名称" prop="componentName">
          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
        </el-form-item>
        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件路径" prop="component">
          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
        </el-form-item>
        <el-form-item label="上级类目" prop="pid">
          <treeselect
            v-model="form.pid"
            :options="menus"
            :load-options="loadMenus"
            style="width: 450px;"
            placeholder="选择上级类目"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitMenu">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { getMenusTree, getMenuSuperior, add, edit } from '@/api/system/menu'
export default {
  components: {
    Treeselect
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showMenu: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      menus: [],
      form: {
        type: '0',
        hidden: false,
        title: '',
        iframe: false,
        permission: null,
        path: null,
        menuSort: 999,
        componentName: null,
        component: null,
        pid: null
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请选择类目', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    disabled() {
      return this.title === '编辑菜单'
    }
  },
  watch: {
    showMenu() {
      if (this.showMenu) this.initForm()
    }
  },
  methods: {
    initForm() {
      this.menus = []
      let params = {
        type: '0',
        hidden: false,
        title: '',
        iframe: false,
        permission: null,
        path: null,
        menuSort: 999,
        componentName: null,
        component: null,
        pid: null
      }
      if (this.title === '编辑菜单') {
        params = Object.assign(this.form, this.editData)
        if (this.editData) {
          if (this.editData.id != null) {
            if (params.pid === null) {
              params.pid = 0
            }
            this.getSupDepts(params.id)
          }
        }
      } else {
        this.menus.push({ id: 0, label: '顶级类目', children: null })
      }
      this.form = params
    },
    getSupDepts(id, params) {
      getMenuSuperior(id).then(res => {
        const children = res.list.map(function(obj) {
          if (!obj.leaf && !obj.children) {
            obj.children = null
          }
          return obj
        })
        this.menus = [{ id: 0, label: '顶级类目', children: children }]
      })
    },
    loadMenus({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        getMenusTree(parentNode.id).then(res => {
          parentNode.children = res.list.map(function(obj) {
            if (!obj.leaf) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    },
    handleClose() {
      this.$emit('update:showMenu', false)
    },
    submitMenu() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // if (this.form.pid === null) return this.$message.warning('请选择上级类目~')
          if (this.title === '新增菜单') {
            this.addMenu()
          } else this.editMenu()
        } else {
          return false
        }
      })
    },
    addMenu() {
      add(this.form).then(res => {
        this.$message.success('操作成功~')
        this.$emit('search')
        this.handleClose()
      })
    },
    editMenu() {
      edit(this.form).then(res => {
        this.$message.success('操作成功~')
        this.$emit('search')
        this.handleClose()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/.el-form-item--small.el-form-item{
    margin-bottom: 25px;
  }
</style>
